<!-- 
说明：会员表表单
作者：nwl
日期：2018-10-11 14:15:0
版本：1.0.0
-->
<template>
  <el-dialog :title="title"
             append-to-body
             visible
             lock-scroll
             :before-close="handleClose"
             width="1100px">
    <el-form ref="form"
             :model="form"
             :label-width="ui.formLabelWidth"
             :element-loading-text="loadingText"
             v-loading="busying">

      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="用户名:"
                        prop="mname"
                        :mk-le-length="32"
                        required>
            {{form.mname}}
          </mk-form-item>
        </el-col>
        <el-col :span="24">
          <mk-form-item label="手机号:"
                        prop="phone"
                        :mk-le-length="20"
                        required>
            {{form.phone}}
          </mk-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="省市区:"
                        prop="provincename"
                        :mk-le-length="60"
                        required>
            <mk-cascader :options="ui.area"
                         :props="areainfo"
                         placeholder="请选择省市区"
                         filterable
                         :value="ui.addressSelect"
                         @change="addressChange"
                         v-model="selectedOptions3"
                         size="small"
                         style="width:100%" />
          </mk-form-item>
        </el-col>
        <el-col :span="24">
          <mk-form-item label="详细地址:"
                        prop="address"
                        :mk-le-length="200"
                        required>
            <el-input v-model="form.address"></el-input>
          </mk-form-item>
        </el-col>

      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="税号:"
                        prop="taxnumber"
                        :mk-le-length="20"
                        required>
            <el-input v-model="form.taxnumber"></el-input>
          </mk-form-item>
        </el-col>
        <el-col :span="24">
          <mk-form-item label="开户银行:"
                        prop="bankaddr"
                        :mk-le-length="50"
                        required>
            <el-input v-model="form.bankaddr"></el-input>
          </mk-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="银行卡号:"
                        prop="banknum"
                        :mk-le-length="20"
                        required>
            <el-input v-model="form.banknum"></el-input>
          </mk-form-item>
        </el-col>
        <el-col :span="24">
          <mk-form-item label="开户人:"
                        prop="contacts"
                        :mk-le-length="20"
                        required>
            <el-input v-model="form.contacts"></el-input>
          </mk-form-item>
        </el-col>
        <el-col :span="24">
          <mk-form-item label="银行卡手机号:"
                        prop="conphone"
                        :mk-le-length="20"
                        required>
            <el-input v-model="form.conphone"></el-input>
          </mk-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="营业执照号:"
                        prop="blicense"
                        :mk-le-length="18"
                        required>
            <el-input v-model="form.blicense"></el-input>
          </mk-form-item>
        </el-col>
        <el-col :span="24">
          <mk-form-item label="身份证号:"
                        prop="idcard"
                        :mk-le-length="18"
                        required>
            <el-input v-model="form.idcard"></el-input>
          </mk-form-item>
        </el-col>
      </el-row>
      <el-row type="flex"
              justify="center">
        <el-col :span="5">

        </el-col>
        <el-col :span="11">
          营业执照
          <mk-upload v-model="form.blicenseimg"
                     :limit="1"
                     type="IMAGE"
                     :choose="false"
                     :width="180"
                     :height="180"
                     list-type="picture-card"></mk-upload>
        </el-col>
        <el-col :span="11">
          身份证正面
          <mk-upload v-model="form.idcardimg1"
                     :limit="1"
                     type="IMAGE"
                     :choose="false"
                     :width="180"
                     :height="180"
                     list-type="picture-card"></mk-upload>
        </el-col>
        <el-col :span="11">
          身份证背面
          <mk-upload v-model="form.idcardimg2"
                     :limit="1"
                     type="IMAGE"
                     :choose="false"
                     :width="180"
                     :height="180"
                     list-type="picture-card"></mk-upload>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="客户类型:"
                        prop="type"
                        :mk-le-length="20"
                        required>
            <!-- <el-input v-model="form.type"></el-input> -->
            <mk-config-select mk-config="Z_MEM_LX"
                              v-model="form.type"
                              @change="selectedKeHuLX"
                              mkEmptyLabel="请选择"></mk-config-select>
          </mk-form-item>
        </el-col>

      </el-row>
      <el-row type="flex"
              v-if="this.isguanlianshen">
        <el-col :span="24">
          <mk-form-item label="会长省份:"
                        prop="guanlianshengfen"
                        :mk-le-length="20">
            <el-select v-model="form.guanlianshengfen"
                       placeholder="请选择会长省份">
              <el-option v-for="item in ui.area"
                         :key="item.areacode"
                         :label="item.areaname"
                         :value="item.areacode">
              </el-option>
            </el-select>
          </mk-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div slot="footer">

      <mk-button @click="onSubmit(1)"
                 :type="2">{{btnName}}</mk-button>
      <mk-button @click="onSubmit(2)"
                 :type="0">驳回</mk-button>
      <mk-button @click="handleClose">取消</mk-button>
    </div>
  </el-dialog>
</template>

<script>
import { MkBase } from 'element-ui'
import area from 'element-ui/lib/datas/mk-area'
import formData from './form-data'
import MkUpload from 'sbin/upload'
import cloneDeep from 'lodash.clonedeep'
export default {
  name: 'z-members-form',
  mixins: [MkBase],
  isguanlianshen: false,
  components: {
    MkUpload
  },
  props: {
    psid: String,
    isAdd: Boolean,
    title: String,
    btnName: String,
    row: Object
  },
  mounted () {
    if (this.isAdd === false) {
      this.form = cloneDeep(this.row)
    }
    if (this.form.type == '1') { this.isguanlianshen = true }

    this.selectedOptions3 = [this.form.provincecode, this.form.citycode, this.form.areacode]
  },
  data () {
    let validateAddressSelect = (rule, value, callback) => {
      value = this.form.province
      if (!value) {
        callback(new Error('请选择省市区！'))
      }
      callback()
    }
    let validateAdress = (rule, value, callback) => {
      if (value && (value.length < 2 || value.length > 200)) {
        callback(new Error('长度应该2到200个字'))
      }
      callback()
    }
    const form = formData()
    return {
      ui: {
        formLabelWidth: '150px',
        addressSelect: [], // 地址选择器 默认选中值
        productSelectVisible: false,
        searching: true,
        area // 地址选择器
      },
      form,
      busying: false,
      loadingText: '正在保存',
      areainfo: {
        value: 'areacode', // 和显示关联起来的，不显示。value
        label: 'areaname' // 显示出来的内容。key
      },
      rules: {
        province: [
          { required: true, message: '请选择省市区！', trigger: 'blur' },
          { validator: validateAddressSelect }
        ],
        adress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
          { validator: validateAdress }
        ]
      },
      selectedOptions3: [],
      isguanlianshen: false
    }
  },
  methods: {
    async valid () {
      if (!this.validate) {
        let fn = this.$refs.form.validate
        let nodejs = false
        this.validate = this.$promise({ fn, nodejs })
      }
      return await this.validate()
    },
    addressChange: function (code, name) {
      this.form.provincename = name[0]
      this.form.cityname = name[1]
      this.form.areaname = name[2]
      this.form.provincecode = code[0]
      this.form.citycode = code[1]
      this.form.areacode = code[2]
    },
    selectedKeHuLX: function () {
      if (this.form.type == '1') {
        this.isguanlianshen = true
      } else {
        this.isguanlianshen = false
      }
    },
    async onSubmit (shehetype) {
      if (await this.valid()) {
        if (shehetype == '1') {
          this.form.status = 1
        } else if (shehetype == '2') {
          this.form.status = 2
        }
        this.busying = true
        try {
          let data = await this[this.isAdd === false ? '$put' : '$post'](
            `/zMembers/${
              this.isAdd === false ? 'update' : 'add'
            }.json`,
            {
              zMembers: this.form,
              guanlianshengfen: this.form.guanlianshengfen
            }
          )
          if (data) {
            this.$emit('close', true)
          }
        } finally {
          this.busying = false
        }
      }
    },
    handleClose () {
      this.$emit('close')
    }
  }
}
</script>
